import React, { useState } from 'react'
import { AntDesignOutlined, UserOutlined, LogoutOutlined } from '@ant-design/icons'
import { Avatar, Dropdown, Modal } from 'antd'
import { useToken } from '@/context/tokenContext'
import { useUserInfo } from '@/context/userInfoContext'
import { performLogout } from '@/utils/logout'
import UserCenter from '@/component/UserCenter'
import '@/component/UserCenter/index.scss'

function MyAvatar() {
  const { removeToken } = useToken()
  const { setUserInfo } = useUserInfo()
  const [userCenterIsShow, setUserCenterIsShow] = useState(false)
  const toUserCenter = () => {
    setUserCenterIsShow(true)
  }
  const logout = () => {
    // 显示确认对话框
    Modal.confirm({
      title: '确认退出登录',
      content: '退出登录将清除所有本地数据，确定要退出吗？',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        performLogout(removeToken, setUserInfo, () => {
          // 登出成功后的回调，可以在这里添加跳转逻辑
          // window.location.href = '/login'
        })
      }
    })
  }
  const items = [
  {
    key: '1',
    label: (
    <div onClick={toUserCenter}>
      <UserOutlined style={{marginRight: "8px"}} />
      <span target="_blank">
        个人中心
      </span>
    </div>
    ),
  },
  {
    key: '2',
    label: (
      <>
        <LogoutOutlined style={{marginRight: "8px"}} />
        <span onClick={() => logout()}>
          退出登录
        </span>
      </>
    ),
  }
]
  return (
    <>
      <Dropdown menu={{ items }} placement="bottomRight" arrow={{ pointAtCenter: true }}>
        <Avatar
          size={{ xs: 36, sm: 36, md: 40, lg: 50, xl: 50, xxl: 50 }}
          icon={<AntDesignOutlined />}
          alt="用户头像"
          src="/src/assets/images/default-avatar.jpg"
        />
      </Dropdown>

      {/* 个人中心 */}
      {userCenterIsShow && <UserCenter onClose={() => setUserCenterIsShow(false)} />}
    </>
  )
}

export default MyAvatar
